<template>
  <div>
    <!--1
      el-table 是 elementui提供表格标签
      :data 是 绑定属性data()里面的属性
      prop="date"  显示 data() 里面的 tableData 它里面的date日期
      fixed 固定当前列
    -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column fixed prop="createTime" label="生日" width="150"></el-table-column>
      <el-table-column prop="name" label="姓名" width="150"> </el-table-column>
      <el-table-column prop="phone" label="手机号" width="150"></el-table-column>
      <el-table-column prop="address" label="地址" width="300"> </el-table-column>
      <el-table-column prop="email" label="邮箱" width="300"> </el-table-column>
      <el-table-column fixed="right" label="操作" >
        <template slot-scope="scope"><!-- 自定义模板 -->
          <el-button @click="delUser(scope.row)" type="text" size="small">删除</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页插件 -->
    <!--
      background 设置背景颜色
      align="right"  设置位置  左 中 右
      layout  分页的布局
      :page-size 设置每一页的条数
      :total     设置总条数
      @size-change  事件绑定
      @current-change 事件绑定
    -->
    <el-pagination
      background
      align="right"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="sizeChange"
      @current-change = "currentChange"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "user",//当前组件名字
  //专门用来写方法的
  methods: {
    handleClick(row) {
      console.log(row);
    },
    sizeChange(){
      console.log("sizeChange")
    },
    //给页码绑定事件  改变事件   val 其他就是你当前点击的那个页面的值
    currentChange(val){
      this.currentPage = val
      this.getUserList(this.currentPage,this.pageSize)
    },
    //当前页  和  每一页的条数
    getUserList(page,size){
      //定义参数
      this.parameter = {
         currentPage:page,
         pageSize:size
      }
      this.$http.get("/user/list",this.parameter).then(res =>{
        console.log(res.data)
        this.tableData = res.data.rows
        this.total = res.data.total
      })
    },
    delUser(val){
        this.$http.delete("/user/delete",{id:val.id}).then(res=>{
          console.log(res)
          if(res.data.success){
            //刷新列表
            this.getUserList(this.currentPage,this.pageSize)
            //弹出提示框
            this.$message({
              message: res.data.msg,
              type: 'success'
            });
          }

        })
    }
  },
  // 组件里面data
  // 专门用于定义组件字段
  data() {
    return {
      tableData:null,
      pageSizes:[10, 20, 30, 40],
      pageSize:10,
      currentPage:1,
      total:0,
      parameter:null,
    }
  },
  //初始化执行
  mounted(){
    this.getUserList(this.currentPage,this.pageSize)
  }
}
</script>

<style scoped>

</style>
